<template>
  <div class="growth">
    <Title title="自动生长记录图片" />
    <div class="title-con">
      <el-carousel :autoplay="true">
        <el-carousel-item v-for="(kit, indexk) in conList" :key="indexk">
          <div v-for="(itk, indexi) in kit" :key="indexi" class="img-box">
            <img v-if="itk.src" :src="itk.src ? 'data:image/jpeg;base64,' + itk.src : ''" />
            <img v-if="!itk.src" />
            <div v-if="itk.collectTime" class="img-box-div">
              {{ itk.picName ? itk.picName : "" }}
              (采集时间：{{ itk.collectTime ? itk.collectTime : "" }})
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <img src="~@/assets/conservation-model/lin1.png" class="bottom-img" alt />
  </div>
</template>

<script>
import Title from "@/components/Title/index";
import configurationApi from "@/api/digital-production/conservation-model/configuration/index";
// import Axios from 'axios';

export default {
  components: {
    Title
  },
  props: {},
  data() {
    return {
      conList: []
    };
  },
  watch: {},
  created() {},
  methods: {
    async getData(data) {
      if (data.length > 0) {
        data.forEach(async element => {
          // console.log(element)
          this.$set(element, "src", await this.queryPicture(element));
          // element.src = src;
        });
        setTimeout(() => {
          if (data.length === 3) {
            data[0]["picName"] = "前期";
            data[1]["picName"] = "中期";
            data[2]["picName"] = "后期";
          }
          this.traverList(data, 1);
        }, 8000);
      } else {
        // console.log("测试")
        // Axios({
        //   method: 'post',
        //   url: this.$baseurl.webServiceUrl +
        // })

        let res = await configurationApi.querydefaultImage({
          organizationNo: sessionStorage.organizationNo
        });
        let datas = res.data;
        datas.forEach(async element => {
          // console.log(element)
          this.$set(element, "src", element?.imageData);
          // element.src = src;
        });
        this.traverList(datas, 1);
      }
    },
    async queryPicture(data) {
      // console.log(data)
      let res = await configurationApi.queryGrowtSeedAnalysisPicture(
        data.pictureNo
      );
      // .then((res) => {
      // });                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        // .then
      if (res.code === 1) {
        let list = res.data || {};
        return list.pictureData;
        // console.log(list)
        // if (list.picture) {
        //   return list.picture;
        // } else {
        //   return "";
        // }
      } else {
        this.$message.error("查询失败");
      }
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      var list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      this.conList = list;
    }
  }
};
</script>

<style lang="scss" scoped>
.growth {
  height: 100%;
  width: 100%;
  ::v-deep .el-carousel {
    height: 100%;
  }
  ::v-deep .el-carousel__container {
    height: 100%;
  }
  position: relative;
  .bottom-img {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
  }
}
::v-deep .el-carousel__indicators--horizontal {
  display: none;
}

.img-box {
  height: 100%;
  width: 100%;
  > img {
    height: 85%;
    width: 100%;
  }
  > div {
    width: 100%;
    text-align: center;
  }
}
</style>
